<template>
  <view>
    <u-navbar auto-back title="提现" placeholder></u-navbar>
    <view class="px-12">
      <view class="card color-black">
        <view>
          <view class="flex-col items-center">
            <view class="text-14 mt-20"> 提现金额 </view>
            <view class="text-24 mt-12">
              <text class="text-16">￥</text>
              <text>12.29</text>
            </view>
            <view
              class="flex items-center w-full mt-24 justify-between text-12"
            >
              <view>服务费 </view>
              <view>￥0.00</view>
            </view>
            <view
              class="flex items-center w-full mt-12 justify-between text-12"
            >
              <view>提现手续费(每笔1元) </view>
              <view>￥0.00</view>
            </view>
            <view
              class="flex items-center w-full mt-12 justify-between text-12"
            >
              <view>实际到账 </view>
              <view class="color-primary">￥0.00</view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="card color-black flex text-12 items-center"
        @click="show = true"
      >
        <view>到账账户</view>
        <view class="flex justify-between pl-12 items-center flex-1">
          <view class="color-tip"> 请选择提现方式 </view>
          <u-icon name="arrow-right" size="12"></u-icon>
        </view>
      </view>
      <view class="text-12">
        <view class="color-black my-12">提现说明：</view>
        <view class="color-gray">
          服务费：为确保提现流程安全,平台将提供技术服务支持等服务,该笔费用预先从提现金额中扣除,最终到账金额为扣除服务费后的金额。
        </view>
      </view>
    </view>
    <u-picker
      :show="show"
      @close="close"
      closeOnClickOverlay
      @cancel="close"
      :columns="columns"
      @confirm="accountConfirm"
      confirmColor="#5db292"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      columns: [["微信", "支付宝", "银行卡"]],
    };
  },
  methods: {
    navToWithdrawBankCard() {
      this.$Router.push({
        name: "withdrawBankCard",
      });
    },
    accountConfirm() {
      this.navToWithdrawBankCard();
    },
    close() {
      this.show = false;
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.card {
  margin-top: 24rpx;
  width: 702rpx;
  box-sizing: border-box;
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
}
</style>
